<template>
    <div>
        <div class="normalWapper" v-if="obj.type == 1">
            <div class="header">
            <div class="left">
                <i class="iconfont iconjiantou2" @click="$router.back()"></i>
                <i class="iconfont iconnew"></i>
            </div>
            <div class="right">
                <span :class="{heightlight:!obj.has_follow}" @click="handleFollow">{{obj.has_follow?'已关注':'关注'}}</span>
            </div>
           </div>
           <div class="title-box">
            <h4>{{obj.title}}</h4>
            <div class="info">
                <span>{{obj.user.nickname}}</span>
                <span>{{obj.create_date.split('T')[0]}}</span>
            </div>
          </div>
          <div class="content" v-html="obj.content"></div>
        </div>
        <div class="videoWapper" v-if="obj.type == 2">
          <div class="video-box">
               <video 
               src="https://video.pearvideo.com/mp4/third/20180910/cont-1431889-10602718-163406-hd.mp4"
               poster="https://image2.pearvideo.com/cont/20180910/cont-1431889-11544080.jpg"
               width="100%"
               ref="video"
               >
                    您的浏览器不支持 video 标签
               </video>
               <div class="mask" ref="mask" @click="playVideo"></div>
          </div>
          <div class="video-info">
               <div class="authorinfo">
                  <div><i class="iconfont iconwode"></i>{{obj.user.nickname}}</div>
                  <span :class="{heightlight:!obj.has_follow}" @click="handleFollow">{{obj.has_follow?'已关注':'关注'}}</span>
               </div>
               <h3>{{obj.title}}</h3>
          </div>
        </div>
        <div class="news-info">
               <div class="other">
                  <div @click="handleLike">
                       <i class="iconfont icondianzan" :class="{font_heightlight:obj.has_like}"></i>
                       {{obj.like_length}}
                  </div>
                  <div>
                       <i class="iconfont iconweixin"></i>微信
                  </div>
               </div>
          </div>
          <div class="no-content">
              <h4>精彩跟帖</h4>
              <div class="sofa" v-if="commentList.length == 0">暂无跟帖，抢占沙发</div>
          </div>
          <Comment :mainCommentItem="item" v-for="item in commentList" :key="item.id" @parentCallReply="callReply"></Comment>
          <div class="moreComment" @click="$router.push('/funnyComment/'+obj.id)" v-if="commentList.length > 0">更多跟帖</div>
          <ReplyArea :parentInfo="parentInfo" ref="ReplyArea"
          :hasStar="obj.has_star" :commemtCount="obj.comment_length" @loadDetail="getDetail"></ReplyArea>
    </div>
</template>

<script>
import Comment from '../../components/comment/Comment'
import ReplyArea from '../../components/ReplyArea'
export default {
    data(){
        return{
            obj:{},
            commentList:[],
            parentInfo:{
                id:'',
                nickname:''
            }
        }
    },
    components:{
        Comment,
        ReplyArea
    },
    methods:{
        getDetail(){
               this.$axios({
                    url:'/post/' + this.$route.params.id,
               }).then(res => {
                   this.obj = res.data.data;
                   this.getComments();
               })
          },
          playVideo(){
               this.$refs.mask.style.display = 'none';
               this.$refs.video.play();
          },
          handleFollow(){
              if(this.obj.has_follow){
                  this.$axios({
                      url:'/user_unfollow/'+this.obj.user.id
                  }).then(res=>{
                     this.obj.has_follow = false;
                     this.$toast(res.data.message);
                  })
              }else{
                  this.$axios({
                  url:'/user_follows/'+this.obj.user.id
                  }).then(res=>{
                     this.obj.has_follow = true;
                     this.$toast(res.data.message);
                  })
              }
          },
          handleLike(){
                this.$axios({
                    url:'/post_like/'+this.obj.id
                }).then(res=>{
                    if(res.data.message == '点赞成功'){
                        this.obj.like_length += 1;
                        this.obj.has_like = true;
                    }else{
                        this.obj.like_length -= 1;
                        this.obj.has_like = false;
                    }
                    this.$toast(res.data.message);
                })
          },
          getComments(){
              this.$axios({
                  url:'/post_comment/'+this.obj.id
              }).then(res =>{
                  const commentList = res.data.data;
                  if(commentList.length > 3){
                      commentList.length = 3;//将评论list重置为3条
                  }
                  this.commentList = commentList
                  //清空输入框子组件中回复框中的placeholder
                  //之所以不在子组件中清除是因为子组件不能修改父组件的值   
                  this.parentInfo = {};
              })
          },
          callReply(parentInfo){
            // 从这里传给输入框的子组件
            this.parentInfo = parentInfo;
            // 调起输入框子组件的输入框显示事件 事件带括号
            this.$refs.ReplyArea.showTextarea();
          }
    },
    created(){//使用created不用初始化数据
        this.getDetail();
    }
}
</script>

<style lang="less" scoped>
.header{
    display: flex;
    height: 15vw;
    line-height: 15vw;
    justify-content: space-between;
    padding:0 6.111vw;
    .left{
        display: flex;
        justify-content: space-between;
        .jiantou2{
            margin-right: 2.778vw;
            font-size: 5vw;
            color: #000;
        }
        .iconnew{
            font-size: 16.667vw;
            color: #000;
            padding: 0;

        }
    }
    .right{
        span{
            padding:1.389vw 5vw;
            font-size: 3.333vw;
            color: #333;
            border:1px solid #D7D7D7;
            border-radius: 5.556vw;
        }
    }
}
.title-box{
    padding:0 6.111vw;
    h4{
        color: #333333;
        font-size: 5vw;
        font-weight: 700;
    }
    .info{
        padding:1.667vw 0;
        span{
            color:#868686;
            font-size: 3.889vw;
            &:first-child{
                margin-right: 4.167vw;
            }
        }
    }
}
// 视频 begin
.video-box{
     position: relative;
     height:56.111vw;
     //background-color: pink;
     .mask{
          position: absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background: rgba(0, 0, 0, .5) url('../../assets/arr.png') no-repeat center;
     }
}
.video-info{
     padding: 4.167vw 6.111vw 0 6.111vw;
     .authorinfo{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          >div{
               font-size: 4.444vw;
               color: #868686;
               .iconfont{
                    margin-right: 1.389vw; 
                    font-size: 6.667vw;
                    color:#d7d7d7;
               }
          }
          span{
               padding:1.111vw 4.167vw;
               font-size: 3.889vw;
               color: #333;
               border:1px solid #d7d7d7;
               border-radius: 4.167vw;
          }
     }
     h3{
          padding-top: 6.111vw;
          font-size: 4.444vw;
          font-weight: 400;
          color:#333333;
     }
}
// 视频 end
.content{
    padding: 4.444vw 6.111vw 0 6.111vw;
    line-height: 7.778vw;
    font-size: 4.167vw;
    color: #333333;
    // 这里用 width 并不严谨
    /deep/ img{
        max-width: 100%;
    }
}
.news-info{
     padding: 9.444vw 6.111vw 5vw 6.111vw;
     border-bottom: 1.667vw solid #E4E4E4;
     .other{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          >div{
               padding:1.667vw 5.556vw;
               border:1px solid #d7d7d7;
               border-radius: 5.556vw;
               font-size: 3.889vw;
               color: #333;
               .icondianzan{
                    margin-right: 1.667vw;
                    color: #000;
               }
               .iconweixin{
                    margin-right: 1.667vw;
                    color:#00C800;
               }
          }
     }
}


.no-content{
    text-align: center;
    //padding-bottom: 16.111vw;//底部栏的高度
    h4{
        padding:5.556vw 0 8.333vw 0;
        font-size: 5vw;
        color: #333333;
        font-weight: 400;
   }
    .sofa{
        padding-bottom: 30vw;
        color: #AEAEAE;
        font-size: 3.889vw;
    }
}
.moreComment{
    margin: 6.667vw auto 25vw auto;
    width: 33.333vw;
    height: 7.778vw;
    line-height: 8.333vw;
    text-align: center;
    color: #333;
    font-size: 3.889vw;
    border:1px solid #797979;
    border-radius: 3.889vw;
}

.heightlight{
     color:#fff !important;
     background-color: #ffc0cb !important;
}
.font_heightlight{
    color:#ffc0cb !important;
}

</style>